<template>
  <div class="peipao_body">
    <div class="serch_div">
      <el-row type="flex" justify="center">
        <el-col :span="24">
          <el-form
            :inline="true"
            :model="serch_form"
            :label-width="'92px'"
            class="ty_serch_form"
          >
            <el-form-item label="名称">
              <el-input v-model="serch_form.name"></el-input>
            </el-form-item>

            <el-form-item>
              <div class="ty_serch_btn">
                <el-button class="cx_btn" type="primary" size="small">查 询</el-button>
                <el-button class="cz_btn" size="small">重 置</el-button>
              </div>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </div>

    <div class="table_body">
      <ty-Table :tablePrps="tablePrps" :tableData="tableData" :fixed_width="'250'">
        <!-- <template slot-scope="props" slot="diy_column">
          <template v-if="props.row.key == 'status'">
            {{ props.row.status == 1 ? "启用" : "禁用" }}
          </template>
        </template> -->

        <template slot="diy_fixed" slot-scope="props">
          <el-button class="dl_color_btn" type="text">编辑</el-button>
          <el-button class="dl_color_btn" type="text" @click="look_details_click"
            >详情</el-button
          >
        </template>
      </ty-Table>

      <el-row type="flex" justify="center">
        <el-col :span="24">
          <div class="ty_fy_div">
            <el-pagination
              :current-page="fyData.start"
              :page-sizes="[10, 20, 30, 40, 50, 60, 70, 80, 90, 100]"
              :page-size="fyData.limit"
              layout="total, sizes, prev, pager, next, jumper"
              :total="fyData.totalRows"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </el-col>
      </el-row>
    </div>

    <!--报告详情-->
    <el-drawer size="65%" :visible.sync="drawer_detail_show" @opened="drawer_open_change">
      <div slot="title" class="d_title">报告详情</div>
      <div class="drawer_detail_body">
        <div class="bg_tab_div">
          <el-tabs v-model="tab_active" @tab-click="tab_click">
            <el-tab-pane
              v-for="(v, k) in tab_list"
              :key="k"
              :label="v.label"
              :name="v.name"
            ></el-tab-pane>
          </el-tabs>
        </div>
        <div class="cont_body">
          <div id="bggk" class="ty_content_div bggk_div">
            <div class="ty_title">报告概况</div>
            <div class="bggk_cont">
              <div class="bggk_l_div">
                <div class="l_item" style="margin-top: 0px">
                  <div class="lable w90">风险指数</div>
                  <div class="value">
                    <div class="number">36</div>
                    <div class="tag">高风险</div>
                  </div>
                </div>
                <div class="l_item">
                  <div class="lable w90">报告生成时间：</div>
                  <div class="lable">2025-05-12 15:16:12</div>
                </div>
                <div class="l_item">
                  <div class="lable w90">报告编号：</div>
                  <div class="lable">51465131651513</div>
                </div>
                <div class="l_item">
                  <div class="lable">高风险</div>
                  <div style="width: 80%; margin: 0 8px">
                    <el-progress
                      color="#0084FF"
                      text-inside
                      :stroke-width="18"
                      :percentage="50"
                    ></el-progress>
                  </div>
                  <div class="lable">低风险</div>
                </div>
              </div>
              <div class="bggk_r_div">
                <div class="tag_div">
                  <div class="tag_item_1">
                    <img
                      src="../../assets/images/bg_warn.png"
                      style="width: 40px; height: 40px"
                    />
                    <div class="t_cont">
                      <div class="label">查得风险</div>
                      <div class="number">5</div>
                    </div>
                  </div>
                  <div class="tag_item_2">
                    <img
                      src="../../assets/images/bg_scress.png"
                      style="width: 40px; height: 40px"
                    />
                    <div class="t_cont">
                      <div class="label">查得正常</div>
                      <div class="number">5</div>
                    </div>
                  </div>
                </div>
                <div class="warn_div">
                  <div class="w_item">
                    <img class="w_img" src="../../assets/images/tag_warn.png" />
                    <div class="w_text">存在大数据评分较低</div>
                  </div>
                  <div class="w_item">
                    <img class="w_img" src="../../assets/images/tag_warn.png" />
                    <div class="w_text">存在大数据评分较低</div>
                  </div>
                  <div class="w_item">
                    <img class="w_img" src="../../assets/images/tag_warn.png" />
                    <div class="w_text">存在大数据评分较低</div>
                  </div>
                  <div class="w_item">
                    <img class="w_img" src="../../assets/images/tag_warn.png" />
                    <div class="w_text">存在大数据评分较低</div>
                  </div>
                  <div class="w_item">
                    <img class="w_img" src="../../assets/images/tag_warn.png" />
                    <div class="w_text">存在大数据评分较低</div>
                  </div>
                  <div class="w_item">
                    <img class="w_img" src="../../assets/images/tag_warn.png" />
                    <div class="w_text">存在大数据评分较低</div>
                  </div>
                </div>
                <div class="scress_div">
                  <img class="s_img" src="../../assets/images/tag_scress.png" />
                  <div class="s_text">
                    系统检测了其他3项风险，您均未命中，后续请定期（2个月）查看报告，做好风险筛查和防范工作。
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div id="jbxx" class="ty_content_div">
            <div class="ty_title">基本信息</div>
            <div class="jbxx_cont">
              <div class="user_img_div">
                <img class="user_img" src="../../assets/images/user_tag.png" alt="" />
                <div class="user_name">杨文淑</div>
              </div>
              <div class="user_info_div">
                <div class="u_item">身份证号：500221199105050505</div>
                <div class="u_item">手机号码：1561515151</div>
                <div class="u_item g_flex1">身份证检查结果：检验通过</div>
                <div class="u_item g_flex1">
                  手机号检测结果：被查询人姓名与运营商提供的一致、被查询人身份证与运营商提供的一致
                </div>
              </div>
            </div>
          </div>
          <div id="dsjpf" class="ty_content_div">
            <div class="ty_title">大数据评分</div>
            <div class="fraction_div">3分</div>
            <div class="dsjpf_cont">
              <div class="dashboard_div">
                <div class="number">700分</div>
                <div class="n_text">大数据评分</div>
              </div>
              <div class="warn_tip_div">
                <img class="warn_img" src="../../assets/images/warn_tag2.png" />
                <div class="warn_text">
                  <span class="warn_sub_text">异常提醒:</span
                  >需要优化机构查询，或者重大案件诉讼，可根据情况做征信修复提高评分后在申如未结案，建议（只要识别到执行人，未结案）极差不符合陪跑计划。
                </div>
              </div>
            </div>
          </div>
          <div id="zxcx" class="ty_content_div">
            <div class="ty_title">征信查询</div>
            <div class="fraction_div">3分</div>
            <div class="zxcx_cont">
              <div class="echart_div">
                <div class="echart_item">
                  <div class="e_title">查询汇总</div>
                  <echart ref="report"></echart>
                </div>
                <div class="echart_item" style="padding: 20px">
                  <div class="e_title" style="margin: 0 0 15px 0">查询记录</div>
                  <tyTable
                    :tablePrps="cxjl_tablePrps"
                    :tableData="cxjl_tableData"
                    :operation="false"
                  ></tyTable>
                </div>
              </div>
              <div class="warn_tip_div">
                <img class="warn_img" src="../../assets/images/warn_tag2.png" />
                <div class="warn_text">
                  <span class="warn_sub_text">异常提醒:</span
                  >需要优化机构查询，或者重大案件诉讼，可根据情况做征信修复提高评分后在申如未结案，建议（只要识别到执行人，未结案）极差不符合陪跑计划。
                </div>
              </div>
            </div>
          </div>
          <div id="fzxx" class="ty_content_div">
            <div class="ty_title">负债信息</div>
            <div class="fraction_div">3分</div>
            <div class="fzxx_cont">
              <div class="table_div">
                <div class="table_item">
                  <div class="e_title">负债信息</div>
                  <div class="form_div">
                    <div class="form_item">贷款已结清机构数:1~5</div>
                    <div class="form_item">贷款时长(天):520~∞</div>
                    <div class="form_item">累计负债金额：45000~115000</div>
                    <div class="form_item">历史贷款机构成功还款笔数：10~34</div>
                    <div class="form_item">历史贷款机构交易失败笔数：3~5</div>
                  </div>
                </div>
                <div class="table_item" style="padding: 20px">
                  <div class="e_title" style="margin: 0 0 15px 0">负债记录</div>
                  <tyTable
                    :tablePrps="fzjl_tablePrps"
                    :tableData="fzjl_tableData"
                    :operation="false"
                  ></tyTable>
                </div>
              </div>
              <div class="warn_tip_div">
                <img class="warn_img" src="../../assets/images/warn_tag2.png" />
                <div class="warn_text">
                  <span class="warn_sub_text">异常提醒:</span
                  >需要优化机构查询，或者重大案件诉讼，可根据情况做征信修复提高评分后在申如未结案，建议（只要识别到执行人，未结案）极差不符合陪跑计划。
                </div>
              </div>
            </div>
          </div>
          <div id="lscx" class="ty_content_div">
            <div class="ty_title">流水查询</div>
            <div class="fraction_div">3分</div>
            <div class="lscx_cont">
              <div class="lscx_tab_div">
                <el-tabs v-model="lscx_tab_active" @tab-click="lscx_tab_click">
                  <el-tab-pane
                    v-for="(v, k) in lscx_tab_list"
                    :key="k"
                    :label="v"
                    :name="`${k}`"
                  ></el-tab-pane>
                </el-tabs>
              </div>
              <div class="lscx_table_div">
                <tyTable
                  :tablePrps="lscx_tablePrps"
                  :tableData="lscx_tableData"
                  :operation="false"
                ></tyTable>
              </div>
              <div class="warn_tip_div">
                <img class="warn_img" src="../../assets/images/warn_tag2.png" />
                <div class="warn_text">
                  <span class="warn_sub_text">异常提醒:</span
                  >需要优化机构查询，或者重大案件诉讼，可根据情况做征信修复提高评分后在申如未结案，建议（只要识别到执行人，未结案）极差不符合陪跑计划。
                </div>
              </div>
            </div>
          </div>
          <div id="ylskm" class="ty_content_div">
            <div class="ty_title">银联收款码</div>
            <div class="fraction_div">3分</div>
            <div class="ylskm_cont">
              <div class="ylskm_type_div">
                <img
                  class="Payment_code_img"
                  src="../../assets/images/Payment_code.png"
                  alt=""
                />
                <div class="type_text">暂无信息</div>
              </div>
              <div class="warn_tip_div">
                <img class="warn_img" src="../../assets/images/warn_tag2.png" />
                <div class="warn_text">
                  <span class="warn_sub_text">异常提醒:</span
                  >需要优化机构查询，或者重大案件诉讼，可根据情况做征信修复提高评分后在申如未结案，建议（只要识别到执行人，未结案）极差不符合陪跑计划。
                </div>
              </div>
            </div>
          </div>
          <div id="zds" class="ty_content_div">
            <div class="ty_title">诊断书</div>
            <div class="zds_cont">
              <img class="seal_img_div" src="../../assets/images/zds_tag.png" alt="" />
              <div class="zds_title">陪跑尽调诊断书</div>
              <div class="zds_line_div1"></div>
              <div class="zds_info">
                <div class="i_item">
                  <div class="i_key">姓名</div>
                  <div class="i_value">杨淑</div>
                </div>
                <div class="i_item">
                  <div class="i_key">年龄</div>
                  <div class="i_value">52</div>
                </div>
                <div class="i_item">
                  <div class="i_key">性别</div>
                  <div class="i_value">男</div>
                </div>
              </div>
              <div class="key_val_div">
                <div class="key_div">申请额度</div>
                <div class="val_div">
                  <el-select v-model="limit_number">
                    <el-option
                      v-for="item in limit_options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </div>
              </div>
              <div class="key_val_div">
                <div class="key_div">诊断结果</div>
                <div class="val_div">征信存在两项负债问题</div>
              </div>
              <div class="key_val_div border_none">
                <div class="key_div">处方</div>
                <div class="val_div">
                  <div>
                    1、首先，务必制定详细且合理的还款计划，将高利息债务列为优先偿还对象，按时足额还款。
                  </div>
                  <div style="margin-top: 5px">
                    2、其次，在接下来至少半年到一年内，一定要严格避免短期内新增信贷申请。
                  </div>
                </div>
              </div>
              <div class="key_val_div border_none">
                <div class="key_div">医嘱</div>
                <div class="val_div">还款计划一旦制定，切勿因一时困难而中断还款</div>
              </div>
              <div class="zds_line_div2"></div>
              <div class="key_val_div border_none">
                <div class="key_div">备注：</div>
                <div class="val_div">本处方长期有效</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import tyTable from "@/components/ty_el_table/ty_el_table.vue";
import echart from "@/components/echarts/echarts_init.vue";
export default {
  components: {
    tyTable,
    echart,
  },
  data() {
    const tablePrps = [
      { key: "id", label: "id" },
      { diy_show: true, key: "url_ext", label: "图片" },
      { key: "link", label: "跳转地址" },
      { diy_show: true, key: "status", label: "启用状态" },
      { key: "created_at", label: "创建时间" },
      { key: "updated_at", label: "修改时间" },
    ];
    //查询记录表格
    const cxjl_tablePrps = [
      { key: "type", label: "申请类型" },
      { key: "one", label: "近1个月" },
      { key: "tow", label: "近3个月" },
      { key: "one_year", label: "近1年" },
      { key: "tow_year", label: "近2年" },
    ];
    //负债记录表格
    const fzjl_tablePrps = [
      { key: "type", label: "申请类型" },
      { key: "one", label: "近1个月" },
      { key: "tow", label: "近3个月" },
      { key: "one_year", label: "近1年" },
      { key: "tow_year", label: "近2年" },
    ];

    //流水查询表格
    const lscx_tablePrps = [
      { key: "type", label: "申请类型" },
      { key: "one", label: "近1个月" },
      { key: "tow", label: "近3个月" },
      { key: "one_year", label: "近1年" },
      { key: "tow_year", label: "近2年" },
    ];

    //诊断书中的额度数组
    const limit_options = [
      {
        value: 10,
        label: "10万",
      },
      {
        value: 50,
        label: "50万",
      },
      {
        value: 100,
        label: "100万",
      },
      {
        value: 200,
        label: "200万",
      },
      {
        value: 500,
        label: "500万",
      },
    ];

    return {
      tablePrps,
      tableData: [
        {
          id: 1,
          url_ext: "",
          link: "",
          status: 1,
          created_at: "2023-10-01 12:00:00",
          updated_at: "2023-10-01 12:00:00",
        },
      ],
      serch_form: {
        phone: "",
      },
      fyData: {
        start: 1, //当前第几页
        limit: 10, //每页多少条
        totalRows: 0, //总数据条数
      },
      drawer_detail_show: false, // 报告详情抽屉显示状态
      tab_active: "bggk",
      tab_list: [
        { label: "报告概况", name: "bggk" },
        { label: "基本信息", name: "jbxx" },
        { label: "大数据评分", name: "dsjpf" },
        { label: "征信查询", name: "zxcx" },
        { label: "负债信息", name: "fzxx" },
        { label: "流水查询", name: "lscx" },
        { label: "银联收款码", name: "ylskm" },
        { label: "诊断书", name: "zds" },
      ],
      cxjl_tablePrps,
      cxjl_tableData: [
        {
          type: "个人信用报告",
          one: 10,
          tow: 20,
          one_year: 50,
          tow_year: 100,
        },
        {
          type: "企业信用报告",
          one: 5,
          tow: 15,
          one_year: 30,
          tow_year: 60,
        },
      ],
      fzjl_tablePrps,
      fzjl_tableData: [
        {
          type: "个人信用报告",
          one: 10,
          tow: 20,
          one_year: 50,
          tow_year: 100,
        },
        {
          type: "企业信用报告",
          one: 5,
          tow: 15,
          one_year: 30,
          tow_year: 60,
        },
      ],
      // 流水查询tab
      lscx_tab_active: "0",
      lscx_tab_list: ["流水查询1", "流水查询2"],
      lscx_tablePrps,
      lscx_tableData: [
        {
          type: "个人信用报告",
          one: 10,
          tow: 20,
          one_year: 50,
          tow_year: 100,
        },
        {
          type: "企业信用报告",
          one: 5,
          tow: 15,
          one_year: 30,
          tow_year: 60,
        },
      ],
      limit_options,
      limit_number: "",
    };
  },

  methods: {
    init_fun() {},
    get_echart_data() {
      this.$refs.report.initChart("report", []);
    },
    tab_click(tab, e) {
      const element = document.getElementById(tab.name);
      if (element) {
        element.scrollIntoView({
          behavior: "smooth",
          block: "start",
        });
      }
    },
    drawer_open_change() {
      this.get_echart_data();
    },
    look_details_click() {
      this.drawer_detail_show = true;
    },
    handleSizeChange(val) {
      this.fyData.limit = val;
      this.init_fun();
    },
    handleCurrentChange(val) {
      this.fyData.start = val;
      this.init_fun();
    },
    lscx_tab_click(tab) {
      const index = Number(tab.name);
      console.log(this.lscx_tab_list[index]);
    },
  },
};
</script>

<style lang="scss" scoped>
//通用tip
@mixin warn_tip_minxin {
  .warn_tip_div {
    width: 100%;
    display: flex;
    align-items: center;
    background: #f5f6f8;
    border-radius: 10px;
    padding: 15px;
    box-sizing: border-box;
    margin-top: 20px;
    .warn_img {
      width: 20px;
      height: 24px;
      margin-right: 8px;
    }
    .warn_text {
      font-family: Microsoft YaHei;
      font-weight: 400;
      font-size: 14px;
      color: #303233;
      .warn_sub_text {
        color: #ff4949;
        margin-right: 5px;
      }
    }
  }
}

.peipao_body {
  .serch_div {
    background: linear-gradient(0deg, #f9fafe 0%, #ffffff 100%);
    box-shadow: 0px 2px 8px 0px rgba(54, 131, 255, 0.1);
    border-radius: 12px;
    padding: 20px;
  }
  .table_body {
    background: linear-gradient(0deg, #f9fafe 0%, #ffffff 100%);
    box-shadow: 0px 2px 8px 0px rgba(54, 131, 255, 0.1);
    border-radius: 12px;
    padding: 20px;
    margin-top: 20px;
  }

  .d_title {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    text-align: center;
  }

  .drawer_detail_body {
    width: 100%;
    height: 100%;
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    .cont_body {
      width: 100%;
      flex: 1;
      //标题 45 tab 43 padding 40
      max-height: calc(100vh - 45px - 43px - 40px);
      overflow-y: auto;
      scrollbar-width: none;
      box-sizing: border-box;
      .ty_title {
        font-family: Microsoft YaHei;
        font-weight: 600;
        font-size: 14px;
        color: #000000;
        margin-bottom: 20px;
      }
      .ty_content_div {
        padding: 20px;
        background: linear-gradient(0deg, #f9fafe 0%, #ffffff 100%);
        box-shadow: 0px 2px 8px 0px rgba(54, 131, 255, 0.1);
        border-radius: 12px;
        margin-top: 20px;
        position: relative;
      }
      //分数
      .fraction_div {
        position: absolute;
        top: -7px;
        right: 25px;
        width: 71px;
        height: 48px;
        z-index: 1;
        background-image: url("../../assets/images/fraction.png");
        background-size: cover;
        background-repeat: no-repeat;
        display: flex;
        padding-top: 10px;
        padding-left: 5px;
        justify-content: center;
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 18px;
        color: #926c16;
      }

      .bggk_div {
        background-image: url("../../assets/images/bg_bg1.png");
        background-size: cover;
        background-repeat: no-repeat;
        .bggk_cont {
          width: 100%;
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          grid-column-gap: 50px;
          .bggk_l_div {
            display: flex;
            flex-direction: column;
            .l_item {
              display: flex;
              align-items: center;
              margin-top: 10px;
              .lable {
                font-family: Microsoft YaHei;
                font-weight: 400;
                font-size: 12px;
                color: #646f78;
                flex-shrink: 0;
                line-height: 1;
                &.w90 {
                  width: 90px;
                }
              }
              .value {
                display: flex;
                .number {
                  font-family: Microsoft YaHei;
                  font-weight: 400;
                  font-size: 68px;
                  color: #000000;
                  line-height: 0.8;
                }
                .tag {
                  width: 64px;
                  height: 24px;
                  background: #0084ff;
                  border-radius: 4px;
                  font-family: Microsoft YaHei;
                  font-weight: 400;
                  font-size: 12px;
                  color: #ffffff;
                  line-height: 24px;
                  text-align: center;
                  margin-left: 15px;
                }
              }
            }
          }
          .bggk_r_div {
            background: linear-gradient(0deg, #ffffff 0%, #eaf4ff 99%);
            box-shadow: 0px 2px 8px 0px rgba(101, 175, 255, 0.18);
            border-radius: 12px;
            padding: 15px 20px;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            .tag_div {
              display: grid;
              grid-template-columns: repeat(2, 1fr);
              grid-column-gap: 35px;
              .tag_item_1 {
                background: linear-gradient(0deg, #fff0ef 0%, #ffd8d6 100%);
                border-radius: 10px;
                display: flex;
                align-items: center;
                height: 60px;
                padding: 0 20px;
                box-sizing: border-box;
                .t_cont {
                  display: flex;
                  flex-direction: column;
                  margin-left: 20px;
                  .label {
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    font-size: 12px;
                    color: #303233;
                    flex-shrink: 0;
                    min-width: 50px;
                  }
                  .number {
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    font-size: 24px;
                    color: #f1645d;
                  }
                }
              }
              .tag_item_2 {
                background: linear-gradient(0deg, #f0f8ff 0%, #d6ebff 99%);
                border-radius: 10px;
                display: flex;
                align-items: center;
                height: 60px;
                padding: 0 20px;
                box-sizing: border-box;
                .t_cont {
                  display: flex;
                  flex-direction: column;
                  margin-left: 20px;
                  .label {
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    font-size: 12px;
                    color: #303233;
                    flex-shrink: 0;
                    min-width: 50px;
                  }
                  .number {
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    font-size: 24px;
                    color: #0084ff;
                  }
                }
              }
            }
            .warn_div {
              display: grid;
              grid-template-columns: repeat(3, 1fr);
              grid-column-gap: 20px;
              grid-row-gap: 10px;
              margin-top: 15px;
              .w_item {
                display: flex;
                align-items: center;
                .w_img {
                  width: 20px;
                  height: 20px;
                }
                .w_text {
                  font-family: Microsoft YaHei;
                  font-weight: 400;
                  font-size: 12px;
                  color: #303233;
                  margin-left: 5px;
                }
              }
            }
            .scress_div {
              display: flex;
              align-items: center;
              margin-top: 15px;
              .s_img {
                width: 20px;
                height: 20px;
              }
              .s_text {
                font-family: Microsoft YaHei;
                font-weight: 400;
                font-size: 12px;
                color: #303233;
                margin-left: 5px;
              }
            }
          }
        }
      }

      .jbxx_cont {
        display: flex;
        .user_img_div {
          border-radius: 5px;
          background-image: linear-gradient(to bottom, #edf6ff, #d8ebff);
          padding: 15px;
          display: flex;
          flex-direction: column;
          align-items: center;
          .user_img {
            width: 50px;
            height: 50px;
          }
          .user_name {
            font-family: Microsoft YaHei;
            font-weight: 400;
            font-size: 16px;
            color: #303233;
            margin-top: 10px;
          }
        }
        .user_info_div {
          margin-left: 45px;
          display: grid;
          grid-template-columns: 1fr 1fr;
          grid-gap: 10px;
          .u_item {
            font-family: Microsoft YaHei;
            font-weight: 400;
            font-size: 14px;
            color: #303233;
            line-height: 1;
          }
          .g_flex1 {
            grid-column: 1 / -1;
          }
        }
      }

      .dsjpf_cont {
        display: flex;
        flex-direction: column;
        align-items: center;
        .dashboard_div {
          background-image: url("../../assets/images/dashboard_bg.png");
          background-size: cover;
          width: 132px;
          height: 96px;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: flex-end;
          .number {
            font-family: Microsoft YaHei;
            font-weight: bold;
            font-size: 17px;
            color: #ffa476;
            line-height: 40px;
          }
          .n_text {
            font-family: Microsoft YaHei;
            font-weight: 400;
            font-size: 12px;
            color: #303233;
          }
        }
        @include warn_tip_minxin;
      }
      .zxcx_cont {
        display: flex;
        flex-direction: column;
        .echart_div {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          grid-column-gap: 25px;
          .echart_item {
            height: 300px;
            background: #ffffff;
            box-shadow: 0px 2px 8px 0px rgba(54, 131, 255, 0.1);
            border-radius: 10px;
            display: flex;
            flex-direction: column;
            .e_title {
              font-family: Source Han Sans CN;
              font-weight: 400;
              font-size: 14px;
              color: #000000;
              margin: 20px 0 0 20px;
            }
          }
        }
        @include warn_tip_minxin;
      }
      .fzxx_cont {
        display: flex;
        flex-direction: column;
        .table_div {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          grid-column-gap: 25px;
          .table_item {
            height: 300px;
            background: #ffffff;
            box-shadow: 0px 2px 8px 0px rgba(54, 131, 255, 0.1);
            border-radius: 10px;
            display: flex;
            flex-direction: column;
            .e_title {
              font-family: Source Han Sans CN;
              font-weight: 400;
              font-size: 14px;
              color: #000000;
              margin: 20px 0 0 20px;
            }
            .form_div {
              display: grid;
              grid-template-columns: 1fr;
              grid-row-gap: 15px;
              margin: 20px 0 0 20px;
              .form_item {
                font-family: Microsoft YaHei;
                font-weight: 400;
                font-size: 14px;
                color: #303233;
                display: flex;
                align-items: center;
              }
            }
          }
        }
        @include warn_tip_minxin;
      }
      .lscx_cont {
        display: flex;
        flex-direction: column;
        .lscx_tab_div {
          width: 100%;
        }
        .lscx_table_div {
          width: 100%;
        }
        @include warn_tip_minxin;
      }
      .ylskm_cont {
        display: flex;
        flex-direction: column;
        .ylskm_type_div {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          .Payment_code_img {
            width: 111px;
            height: 94px;
          }
          .type_text {
            font-family: Microsoft YaHei;
            font-weight: 400;
            font-size: 14px;
            color: #333333;
            line-height: 36px;
          }
        }
        @include warn_tip_minxin;
      }
      .zds_cont {
        width: 100%;
        background: #ffffff;
        box-shadow: 0px 2px 8px 0px rgba(54, 131, 255, 0.1);
        border-radius: 10px;
        display: flex;
        flex-direction: column;
        padding: 30px 8% 10px;
        box-sizing: border-box;
        position: relative;
        .seal_img_div {
          position: absolute;
          right: 0;
          top: 0;
          z-index: 1;
          width: 90px;
          height: 90px;
        }
        .zds_title {
          font-family: Source Han Serif CN;
          font-weight: bold;
          font-size: 24px;
          color: #2c2c2f;
          text-align: center;
          margin-bottom: 25px;
        }
        .zds_line_div1 {
          width: 100%;
          height: 10px;
          background-image: url("../../assets/images/zds_line1.png");
          background-size: cover;
          background-repeat: no-repeat;
        }
        .zds_info {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          grid-column-gap: 30px;
          padding: 15px 0;
          border-bottom: 1px solid #e6e6e6;
          box-sizing: border-box;
          .i_item {
            display: flex;
            align-items: center;
            .i_key {
              font-family: Source Han Sans CN;
              font-weight: 400;
              font-size: 14px;
              color: #303233;
              margin-right: 10%;
            }
            .i_value {
              font-family: Source Han Sans CN;
              font-weight: 400;
              font-size: 14px;
              color: #000000;
            }
          }
        }
        .key_val_div {
          display: grid;
          grid-template-columns: 30% 70%;
          padding: 15px 0;
          border-bottom: 1px solid #e6e6e6;
          box-sizing: border-box;
          &.border_none {
            border: none;
          }
          .key_div {
            font-family: Source Han Sans CN;
            font-weight: 400;
            font-size: 14px;
            color: #303233;
          }
          .val_div {
            font-family: Microsoft YaHei;
            font-weight: 400;
            font-size: 14px;
            color: #000000;
            display: flex;
            flex-direction: column;
            ::v-deep .el-select {
              width: 100%;
            }
          }
        }
        .zds_line_div2 {
          width: 100%;
          height: 10px;
          background-image: url("../../assets/images/zds_line2.png");
          background-size: cover;
          background-repeat: no-repeat;
        }
      }
    }
  }
}

//抽屉样式自定义
::v-deep .el-drawer {
  background-color: #eff2f7;
}
::v-deep .el-drawer__header {
  margin-bottom: 0;
}

//顶部报告tabs样式自定义
.bg_tab_div {
  ::v-deep .el-tabs__nav-scroll {
    background: linear-gradient(0deg, #f9fafe 0%, #ffffff 100%);
    box-shadow: 0px 2px 8px 0px rgba(54, 131, 255, 0.1);
    border-radius: 12px;
    border: 2px solid #ffffff;
    box-sizing: border-box;
    padding: 0 20px;
  }
  ::v-deep .el-tabs__nav-wrap::after {
    content: none;
  }
  ::v-deep .el-tabs__header {
    margin: 0;
  }
  ::v-deep .el-tabs__item.is-active {
    color: #0084ff;
  }
  ::v-deep .el-tabs__active-bar {
    background-color: #0084ff;
  }

  ::v-deep .el-tabs__item.is-top:last-child {
    padding-right: 40px;
  }
}

//流水查询tab样式自定义
.lscx_tab_div {
  ::v-deep .el-tabs__nav-wrap::after {
    content: none;
  }

  ::v-deep .el-tabs__item {
    height: 40px;
    border-radius: 4px;
    border: 1px solid white;
    box-sizing: border-box;
    padding: 0 20px !important;
    margin-right: 20px;
    transition: all 0.3s;
  }
  ::v-deep .el-tabs__active-bar {
    background-color: transparent;
  }
  ::v-deep .el-tabs__item.is-active {
    color: #0084ff;
    border: 1px solid #0084ff;
  }
}
</style>
